<template>
  <div class="notChecked">
    <div v-if="examStore.currQuestion.is_right" class="ok"><el-icon><Check /></el-icon></div>
    <div v-else class="error"><el-icon><Close /></el-icon></div>
  </div>
</template>

<script setup>
import { Check, Close } from '@element-plus/icons-vue'
import { useExam } from "@/stores/exam.js";
const examStore = useExam();

</script>

<style lang="scss" scoped>
.notChecked {
  margin-right: 5px;
  padding: 0px 10px;
  
  .ok, .error {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    :deep(.el-icon) {
      color: #fff
    }
  }

  .ok {
    background-color: #1E8FDA;
  }
  
  .error {
    background-color: #E52121;
  }
}
</style>